<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8" />
		<title></title>
		<link rel="stylesheet" href="css/index.css" />
		<link rel="stylesheet" href="lib/skin/WdatePicker.css" />
		<link rel="stylesheet" href="js/need/laydate.css" />
	</head>

	<body>
		<div id="dialog">
			设置成功
		</div>

		<div class="table1">
			<div id="excle">
				<h1 class="h1">导出数据</h1>
				<p id="pig_name">猪编号：</h1>
					<div class="daochu">
						<div>
							<span>起始时间:</span>
							<input class="laydate-icon" id="demo2">
						</div>
						<div>
							<span>结束时间:</span>
							<input class="laydate-icon" id="demo3">
						</div>
					</div>
					<div><input id="input_daochu" class="button_daoc" type="button" value="导出" /></div>
			</div>
		</div>
		<div class="table">
			<div id="div-tb">
				<div class="title">
					<h3 class="h3 xyz">猪编号：XXX - 传感器数据历史记录</h3>
					<!--<input class="Wdate" onFocus="WdatePicker(WdatePicker({dateFmt:'yyyy-MM-dd',readOnly:true}))" />-->
					<div class="div-laydate-icon">
						<input placeholder="查询起始时间" class="laydate-icon" id="demo">
						<input placeholder="查询结束时间" class="laydate-icon" id="demo1">
					</div>
					<input id="search" type="button" value="查询" />
					<div class="page">
						<!--<span class="ll-page"> << </span>-->
						<span class="l-page"> < </span>
						<em class="c-page"> 第 页 </em>
						<span class="r-page"> > </span>
						<!--<span class="rr-page"> >> </span>-->
					</div>

					<!--<a class="button" href="http://740b2e83.ngrok.io/excel/pigDatas.xlsx" download="">导出数据表</a>-->
					<input id="daoc" class="button" type="button" value="导出数据表" />
				</div>
				<div class="tb-scroll">
					<table id="tb">
						<thead>
							<tr>
								<th>序号</th>
								<th>时间</th>
								<!--<th>X角度</th>
								<th>Y角度</th>
								<th>Z角度</th>
								<th>X加速度</th>
								<th>Y加速度</th>
								<th>Z加速度</th>-->
								<th>猪编号</th>
								<th>当前状态</th>
							</tr>
							<tbody id="tbody">
							</tbody>
						</thead>
					</table>
				</div>

				<div id="div-tb2">
					<div class="title">
						<h3 class="h3 zitai">猪编号：XXX -姿态历史记录(单位：分钟)</h3>
					</div>
					<div class="tb2-scroll">
						<table id="tb">
							<thead>
								<tr>
									<th>时间</th>
									<th>站(静止)</th>
									<th>趴(静止)</th>
									<!--<th>坐(静止)</th>-->
									<th>躺(静止)</th>
									<th>运动</th>
									<!--<th>静止</th>-->
								</tr>
								<tbody id="tbody2">
								</tbody>
							</thead>
						</table>
					</div>
				</div>
			</div>
		</div>
		</div>

		<div class="img-loading">
			<img src="img/load1.gif">
		</div>

		<div class="box">

			<div class="box-title-menu">
				<p>物联网专业监测平台</p>
			</div>

			<div class="box-left-menu">
				<ul class="box-left-menu-ul">
					<li class="box-li-backcolor">
						<div id="choose-pig" class="box-left-menu-li">选择当前猪宝宝</div>
						<ul id="pig-list-data">
						</ul>
					</li>
					<li>
						<div class="box-left-menu-li">设置采样间隔</div>
						<ul id="pig-list-time">
							<li class="two-li" data-id="1">
								<div>1分钟</div>
							</li>
							<li class="two-li" data-id="5">
								<div>5分钟</div>
							</li>
							<li class="two-li" data-id="10">
								<div>10分钟</div>
							</li>
							<li class="two-li" data-id="15">
								<div>15分钟</div>
							</li>
							<li class="two-li" data-id="30">
								<div>30分钟</div>
							</li>
						</ul>
					</li>
					<li>
						<div class="box-left-menu-li history">查询历史状态</div>
					</li>
					<li>
						<div class="box-left-menu-li output">导出表格数据</div>
					</li>
				</ul>
			</div>

			<div class="box-right-menu">
				<p id="p-date" class="p-date">2017-09-10 18:19:50</p>
				<div class="box-right-menu-statue">
					<div class="div-img">
						<img class="img-icon1" src="img/icon3.jpg" />
					</div>
					<div class="div-p">
						<p id="pig-name" class="p-name">当前猪宝宝：正在获取...</p>
						<p class="p-statue">当前姿态：正在获取...</p>
					</div>
					<div id="connect-statue">
						<span class="name">连接状态</span>
						<span class="statue">初始化...</span>
					</div>

				</div>

				<div class="box-right-menu-statue height200">
					<div class="div-img">
						<img class="img-icon2" src="img/icon1.png" />
					</div>
					<div class="p-tem">
						<p>采样间隔</p>
						<p id="set-time">min</p>
					</div>
					<div id="div-data-w">
						<p class="p-xw">X角度：</p>
						<p class="p-yw">Y角度：</p>
						<p class="p-zw">Z角度：</p>
					</div>
					<div id="div-data-a">
						<p class="p-xa">X加速度：</p>
						<p class="p-ya">Y加速度：</p>
						<p class="p-za">Z加速度：</p>
					</div>
				</div>

				<div class="box-right-menu-statue height400">
					<div id="chart1-ctime">
						<input id="start_time" class="laydate-icon" type="text" placeholder="起始时间" />
						<input id="end_time" class="laydate-icon" placeholder="结束时间" />
						<input id="btn_sure" type="button" value="确定" />
						<input id="btn_cancle" type="button" value="取消" />
					</div>
					<input id="btn_time" class="chart_time" type="button" value="选择时间" />
					<input id="btn_doday" class="chart_time noDisplay" type="button" value="回到今日" />
					<div id="chart1">
					</div>

				</div>
			</div>
		</div>

	</body>

	<script src="lib/require.js"></script>
	<script src="js/index.js"></script>

</html>